<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <style>
        /*
          (1) 将所有的段落设置为红色(字体)
            元素选择器:
              作用: 根据标签名来选中指定的元素
              语法: 标签名{}
              例子: p{} h1{} div{}
         */
        p {
            color: red;
        }

        h1 {
            color: yellow;
        }

        /*
          将儿童相见不相识变为红色

          id选择器(元素的id不能重复)
            作用: 根据元素的id属性值选中一个元素
            语法: #id属性值{}
            例子: #box{} #red{}
        */
        #red {
            color: red;
        }

        /*
         将秋水...和落霞...设置为蓝色

           类选择器
            作用: 根据元素的class属性值选中一组元素
            语法: .class属性值
        */
        .blue {
            color: blue;
        }

        .abc {
            font-size: 20px;
        }


        /*
          通配符选择器
            作用: 选中页面中的所有元素
            语法: *
        */
        * {
            color: red;
        }


    </style>
  </head>
  <body>
    <!--
      这时class有两个属性blue和abc
    -->
    <h1 class="blue abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!--
      class是一个标签的属性,它和id类似,不同的是class可以重复使用
        可以通过class属性来为元素分组
        可以同时为一个元素指定多个class属性
    -->
    <p class="blue">落霞与孤鹜齐飞</p>
    <p class="blue">秋水共长天一色</p>
  </body>
</html>
